<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>获取当前位置</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
	<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
</head>
<style>
.weui-btn {
    margin-top: 16px;
    position: relative;
    display: block;
    min-width: 184px;
    max-width: 280px;
    width: -webkit-fit-content;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding: 12px 24px;
    box-sizing: border-box;
    font-weight: 500;
    font-size: 17px;
    text-align: center;
    text-decoration: none;
    line-height: 1.41176471;
    border-radius: 8px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
}
</style>
<body>
    <h1>Geolocation Example</h1>
    <p>Click the button to get your location.</p>
    <p id="latitude">Latitude：</p>
    <p id="longitude">longitude：</p>
    <a id="getLocationBtn" href="javascript:;" class="weui-btn weui-btn_default">Get My Location</a>

    <script>
        $(document).ready(function() {
            $("#getLocationBtn").click(function() {
                if (navigator.geolocation) {
                    // 获取当前位置
                    navigator.geolocation.getCurrentPosition(
                        function(position) {
                            var latitude = position.coords.latitude;
                            var longitude = position.coords.longitude;
                            $("#latitude").text("Latitude: " + latitude);
                            $("#longitude").text( "Longitude: " + longitude);

                            // 将位置信息发送到服务器端
                            // $.ajax({
                                // type: "POST",
                                // url: "SaveLocation.aspx/SaveLocation", // 服务器端处理地址
                                // data: JSON.stringify({
                                //  latitude: latitude,
                                //longitude: longitude
                                // }),
                                // contentType: "application/json; charset=utf-8",
                                // dataType: "json",
                                // success: function(response) {
                                //     console.log("Location saved successfully.");
                                // },
                                // error: function(xhr, status, error) {
                                //    console.error("Error saving location: " + error);
                                // }
                            // });
                        },
                        function(error) {
                            // 处理错误
                            switch (error.code) {
                                case error.PERMISSION_DENIED:
                                    $("#status").text("User denied the request for Geolocation.");
                                    break;
                                case error.POSITION_UNAVAILABLE:
                                    $("#status").text("Location information is unavailable.");
                                    break;
                                case error.TIMEOUT:
                                    $("#status").text("The request to get user location timed out.");
                                    break;
                                case error.UNKNOWN_ERROR:
                                    $("#status").text("An unknown error occurred.");
                                    break;
                            }
                        }
                    );
                } else {
                    $("#status").text("Geolocation is not supported by this browser.");
                }
            });
        });
    </script>
</body>
</html>
